<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="我的便签" name="first"> </el-tab-pane>
    <el-tab-pane label="个人设置" name="second">
      <el-card>
        <el-form ref="form" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户名">
                <el-input></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话">
                <el-input></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="真实姓名">
                <el-input></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="Email">
                <el-input></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="地址">
                <el-input></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学历">
                <el-input></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="毕业学院">
                <el-input></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号">
                <el-input></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="性别">
                <el-input></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生日">
                <el-input></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <!-- <el-form-item label="上传头像">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
              >
                <el-button size="small" type="primary">文件上传</el-button>
              </el-upload>
            </el-form-item> -->
          </el-row>
          <div class="btn-option">
            <!-- <el-button type="primary">保存</el-button>
            <el-button>取消</el-button> -->
          </div>
        </el-form>
      </el-card>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  data() {
    return {
      activeName: 'second',
    }
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event)
    },
  },
}
</script>
<style lang="less" scoped>
.btn-option {
  display: flex;
  justify-content: flex-end;
}
</style>